<template>
	<el-dialog draggable v-model="dialogShow" :close-on-click-modal="false" width="60%" @close="onClose">
		<el-form ref="formRef" :rules="formRules" :model="formData" size="default" label-width="90px">
			<el-row :gutter="30">
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
					<el-form-item label="用户姓名" prop="Name">
						<el-input v-model="formData.Name" clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
					<el-form-item label="用户状态" prop="Status">
						<el-select v-model="formData.Status" style="width: 100%">
							<el-option :value="'10'" label="正常" />
							<el-option :value="'00'" label="冻结" />
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
					<el-form-item label="登录账号" prop="Account">
						<el-input v-model="formData.Account" clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
					<el-form-item label="所属部门" prop="DeptId">
						<el-tree-select
							v-model="formData.DeptId"
							node-key="Id"
							:data="deptData"
							:render-after-expand="false"
							:props="deptProps"
							check-strictly="true"
							style="width: 100%"
						/>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
					<el-form-item label="用户角色" prop="RoleId">
						<el-select v-model="formData.RoleId" style="width: 100%">
							<el-option v-for="item in roleData" :key="item.Id" :value="item.Id" :label="item.Name" />
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
					<el-form-item label="手机号" prop="Tel">
						<el-input v-model="formData.Tel"></el-input>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
					<el-form-item label="邮箱" prop="Email">
						<el-input v-model="formData.Email"></el-input>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
					<el-form-item label="备注" prop="Remark">
						<el-input v-model="formData.Remark" type="textarea"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="onClose" size="default">取 消</el-button>
				<el-button type="primary" @click="onSubmit" size="default">提交</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
import { Ref, ref } from 'vue';
import { Post } from '/@/common/http';
import EMsg from '/@/common/eMsg';
const dialogShow = ref(false);

const formRef = ref();
const formRules = ref({
	Name: [{ required: true, message: '用户姓名不可为空', trigger: 'blur' }],
	Account: [{ required: true, message: '登录账号不可为空', trigger: 'blur' }],
	DeptId: [{ required: true, message: '请选择部门', trigger: 'blur' }],
	RoleId: [{ required: true, message: '请选择角色', trigger: 'blur' }],
});
const formData = ref({
	Id: 0,
	DeptId: '',
	Name: '',
	Account: '',
	RoleId: '',
	Status: '10',
	Tel: '',
	Email: '',
	Remark: '',
});

const onShow = (id: number) => {
	dialogShow.value = true;
	formData.value.Id = id;
	getDepts();
	getRoles();
	if (id > 0) {
		Post('SysUser/Get', { Id: id }, (res: any) => {
			formData.value = res.Data;
		});
	}
};
const onClose = () => {
	formRef.value.resetFields();
	dialogShow.value = false;
};
const onSubmit = () => {
	formRef.value.validate((valid: any) => {
		if (valid) {
			if (formData.value.Id > 0) {
				Post('SysUser/Edit', formData.value, (res: any) => {
					EMsg.success(res.Msg);
					onClose();
					emit('refresh');
				});
			} else {
				Post('SysUser/Add', formData.value, (res: any) => {
					EMsg.alert('账号:' + formData.value.Account + ' 添加成功,登录密码为: ' + res.Msg);
					onClose();
					emit('refresh');
				});
			}
		}
	});
};

const deptData: Ref<any[]> = ref([]);
const deptProps = {
	label: (data: any) => {
		return data.Name;
	},
};
const getDepts = () => {
	Post('SysDept/GetDepts', {}, (res: any) => {
		deptData.value = res.Data;
	});
};

const roleData: Ref<any[]> = ref([]);
const getRoles = () => {
	Post('SysRole/GetPageList', { PageSize: 1000 }, (res: any) => {
		roleData.value = res.Data.Data;
	});
};

const emit = defineEmits(['refresh']);
defineExpose({
	onShow,
});
</script>
